<template>
    <div class="lg-upload" >
        <!-- 拖拽上传 -->
        <div
            v-if="drag"
            :class="['lg-upload__drag']"
            id="upload-drag"
            @click="onClick"
        >
          <slot>
              <div :class="['lg-upload__drag--wrapper', {'pointer': !fullscreenLoading}, {'lg-upload__drag--forbid': fullscreenLoading}]">
                <i class="iconfont icon-upload"></i>
                <p>将文件拖到此处，或<span>点击上传</span></p>
              </div>
          </slot>
        </div>
        <!-- 正常点击上传 -->
        <div
            v-else
            :class="['lg-upload__slot']"
            @click="onClick"
        >
            <slot>
                <lg-Button>上传</lg-Button>
            </slot>
        </div>
        <slot name="tip"/>
        <slot name="flieList">
            <div class="lg-upload__file" v-if="haveUploadedFile.length || uploadFilesList.length && fileListShowType != 'none'">
                <!-- 列表 -->
                <ul class="lg-upload__file__list" v-if="fileListShowType == 'list'">
                    <li v-for="(item, index) in haveUploadedFile" :key="`list-${index}`">
                        <i
                          :class="['icon', 'iconfont', checkFileType(item.url || item)]"
                        ></i>
                        <span @click="onView(item.url || item, 'list', index)">{{item.name || getUrlFileName(item)}}</span>
                        <i v-if="isDelete" class="delete iconfont icon-simplicityClose" @click="deleteIMG(index)"></i>
                    </li>
                    <!-- 上传进度  -->
                    <li :class="['underway', {error: item.progress >= 100 && item.error }]" v-for="(item, index) in uploadFilesList" :key="`listTwo-${index}`" v-show="(item.progress > 0 && item.progress <= 100 && !item.success) || item.error" style="margin-bottom: 5px">
                        <i
                          :class="['icon', 'iconfont', checkFileType(item.name || item)]"
                        ></i>
                        <span
                        >{{item.name || getUrlFileName(item)}}</span>
                        <i v-if="item.progress >= 100 && item.error" class="delete iconfont icon-simplicityClose" @click="deleteUploadFilesList(index)"></i>
                        <i class="lg-upload__progress" :style="`width:${item.progress}%;`"/>
                        <span class="lg-upload__progressNumber" >{{item.progress >= 100 && item.error ? 'error' : (item.progress || 0) + '%'}}</span>
                    </li>
                    <lg-image v-if="isView && (checkIsImage(haveUploadedFile)).length" ref="imageViews" style="display:none" :previewSrcList="isView ? checkIsImage(haveUploadedFile) : []" :zIndex="9900"/>
                </ul>
                <!-- 方块 -->
                <ul class="lg-upload__file__square" v-if="fileListShowType == 'square'">
                    <li v-for="(item, index) in haveUploadedFile" :key="`list-${index}`" :style="transitionLiStyle()">
                        <!-- 如果是图片就可预览 -->
                        <lg-image v-if="checkFileType(item.url || item) == 'icon-images'" :index="index" :src="item.url || item" @delete="deleteIMG" :previewSrcList="isView ? checkIsImage(haveUploadedFile) : []" isDelete :deleteParams="{fontSize: 22, color: '#53a8ff'}" :zIndex="9900"/>
                        <div v-else :class="['notImage', {pointer: isView}]" @click="onView(item.url || item)">
                            <i :class="['iconfont', checkFileType(item.url || item)]"></i>
                            <span class="flie-type-name">{{checkFileType(item.url || item, true)}}</span>
                        </div>
                    </li>
                    <li v-for="(item, index) in uploadFilesList" :key="`listTwo-${index}`" v-show="(item.progress > 0 && item.progress <= 100 && !item.success) || item.error" class="square-underway">
                        <!-- 删除 -->
                        <i
                          v-if="item.error"
                          class="delete iconfont icon-close"
                          @click="deleteUploadFilesList(index)"
                        />
                        <!-- 环形进度条 -->
                        <lg-Progress class="square-Progress" :width="numerical(imgWidth)" :shrink="15" :status="item.error ? 'exception': ''" :percentage="item.progress" type="circle"/>
                        <!-- 如果是图片就可预览 -->
                        <lg-image v-if="checkFileType(item.name || item) == 'icon-images'" :index="index" :src="item.src"/>
                        <div v-else :class="['notImage']">
                            <i :class="['iconfont', checkFileType(item.name || item)]"></i>
                            <span class="flie-type-name">{{checkFileType(item.name || item, true)}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </slot>
        <!-- pdf预览 -->
        <previewPDF :src.sync="pdfURL"/>
        <!-- 图片裁剪 -->
        <tailorPreview :option="option" v-bind="tailorParams" @close="tailorPreviewClose" @comfirm="uploadModules"/>
    </div>
</template>

<script>
import fileUtil from '@/libs/fileUtil.js'
import { deepClone, isObject, checkFileType, getUrlFileName, conversion, numerical } from '@/libs/index.js'
import lgButton from '@/components/Basic/button'
import lgImage from '@/components/Others/image'
import previewPDF from './previewPDF'
import tailorPreview from '@/components/Others/tailor'
import lgProgress from '@/components/Data/progress'
import axios from 'axios'
export default {
  name: 'lgUpload',
  components: { lgButton, lgImage, previewPDF, tailorPreview, lgProgress },
  props: {
    // 上传的地址 √
    action: {
      type: String,
      default: ''
    },
    // 设置上传的请求头部 √
    headers: {
      type: Object,
      default: () => { return {} }
    },
    // 图片裁剪参数配置 √ // 裁剪的尺寸 两个中有一个不传都不裁剪√
    option: {
      type: Object,
      default: () => { return {} }
    },
    // axios请求配置 √
    defaultConfig: {
      type: Object,
      default: () => { return {} }
    },
    // 图片回显前缀域名，如果接口返回的文件URL没有带前缀域名，需要填写前缀 √
    prefixHttp: {
      type: String,
      default: ''
    },
    // 接口返回参数的字段名 默认为空 √
    responseFileName: {
      type: String,
      default: ''
    },
    // 接口返回状态成功code码 默认为0或200 √
    responseCode: {
      type: Array,
      default: () => [0, 200]
    },
    // 上传时附带的额外参数 √
    data: {
      type: Object,
      default: () => { return {} }
    },
    // 是否支持发送 cookie 凭证信息 √
    withCredentials: {
      type: Boolean,
      default: false
    },
    // 后端上传需要的文件格式 默认blob (注:可选base64 blob) √
    fileFormat: {
      type: String,
      default: 'blob'
    },
    // 是否开启多文件上传 √
    multiple: {
      type: Boolean,
      default: false
    },
    // 上传的文件字段名 √
    fieldName: {
      type: String,
      default: 'file'
    },
    // 是否禁用 √
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否拖拽上传
    drag: {
      type: Boolean,
      default: false
    },
    // 是否显示上传的列表,默认不显示 type: none list square  √
    fileListShowType: {
      type: String,
      default: 'none'
    },
    // 可上传的文件类型  默认是所有图片类型 √
    accept: {
      type: String,
      default: ''
    },
    // 已上传的文件，也用于组件回显 √
    fileList: {
      type: Array,
      default: () => { return [] }
    },
    // 最大上传的文件数量 √
    limit: {
      type: Number,
      default: 1
    },
    // 最大上传文件大小, 默认5M √
    maxSize: {
      type: Number,
      default: 5120
    },
    // 图片列表尺寸  √
    imgWidth: {
      type: String,
      default: ''
    },
    imgHeight: {
      type: String,
      default: ''
    },
    // 文件列表是否支持预览 √
    isView: {
      type: Boolean,
      default: false
    },
    // 是否支持列表删除  √
    isDelete: {
      type: Boolean,
      default: true
    },
    // 传入即使用oss上传 fileFormat类型必须为blob 目前只支持阿里OSS上传 √
    oss: {
      type: Object,
      default: () => { return {} }
      // {
      //   region: res.region,
      //   accessKeyId: res.accessKeyId,
      //   accessKeySecret: res.accessKeySecret,
      //   bucket:  res.bucket,
      //   catalogue: 'defaule', 为oss存放的目录名
      //   url: ''  获取OSS参数返回的url
      // }
    }
    // 事件 不上传服务器返回函数originalFileSuccess(上传成功后的file数组)
    // 事件 上传服务器成功 uploadSuccess(最新的上传成功列表数据)
    // 事件 上传服务器失败 uploadError(失败的err, 已上传列表数据)
    // 事件 上传列表数据change时 dataChange(最新的上传列表数据)
    // 事件 删除文件 deleteFile(删除后的列表，删除的数据)
    // 参数 上传数超出最大上传数 uploadOverrun(当前已上传数，最大可上传数) return String
    // 参数 上传文件大小超出最大上限数 uploadSizeOverrun(超出上限的文件列表，最大size单位K, 最大size单位M)  return String
  },
  data () {
    return {
      haveUploadedFile: [],
      pdfURL: '',
      tailorParams: {
        visible: false,
        src: []
      },
      uploadFilesList: [],
      fullscreenLoading: false, // 上传进度loading
      loadingInstance: null
    }
  },
  watch: {
    fileList: {
      handler (newVal) {
        this.haveUploadedFile = deepClone(newVal)
      },
      deep: true,
      immediate: true
    },
    haveUploadedFile: {
      handler (newVal, oldVal) {
        this.eventCallBack('dataChange', newVal)
      },
      deep: true
    },
    uploadFilesList: {
      handler (newVal, oldVal) {
        if (!newVal.length) return false
        this.changeLoadingStatus()
      },
      deep: true
    }
  },
  mounted () {
    if (this.drag) {
      var dropbox = document.getElementById('upload-drag')
      dropbox.addEventListener('drop', this.eventDrop, false)
      dropbox.addEventListener('dragleave', this.destroyedDrag)
      dropbox.addEventListener('dragenter', this.destroyedDrag)
      dropbox.addEventListener('dragover', this.destroyedDrag)
    }
  },
  methods: {
    changeLoadingStatus () {
      if (isObject(this.oss) && Object.keys(this.oss).length && this.fileFormat == 'blob' || this.action) {
        let isload = this.uploadFilesList.every(item => item.progress >= 100)
        if (isload) {
          this.fullscreenLoading = false
          this.clearLoadingInstance()
        } else {
          this.fullscreenLoading = true
          this.createLoadingInstance()
        }
      }
    },
    onClick () {
      if (this.disabled || this.fullscreenLoading) return false
      if (this.haveUploadedFile.length > this.limit) {
        this.$message.warning(this.$attrs['uploadOverrun'] && this.$attrs['uploadOverrun'](this.haveUploadedFile.length, this.limit) || `最大可上传文件数: ${this.limit} , 当前上传文件数：${this.haveUploadedFile.length}`)
        return false
      }
      this.uploadFilesList = []
      fileUtil.getFile({
        multiple: this.multiple,
        accept: this.accept, // 文件类型， 非必填，默认值image/*
        done: (files, dom) => {
          console.log(files, files.length, 'files=============')
          let file = Array.prototype.slice.call(files.length ? files : [files])
          file.forEach(item => {
            this.uploadFilesList.push({
              name: item.name,
              type: item.type,
              error: false,
              progress: 0,
              src: ''
            })
          })
          if (this.haveUploadedFile.length + file.length > this.limit) {
            this.$message.warning(this.$attrs['uploadOverrun'] && this.$attrs['uploadOverrun'](this.haveUploadedFile.length + file.length, this.limit) || `最大可上传文件数: ${this.limit} , 当前上传文件数：${this.haveUploadedFile.length + file.length}`)
            return false
          }
          let sizeArr = []
          file.forEach(item => {
            if ((item.size / 1024) > this.maxSize) {
              sizeArr.push(item.name)
            }
          })
          if (sizeArr.length) {
            this.$message.warning(this.$attrs['uploadSizeOverrun'] && this.$attrs['uploadSizeOverrun'](sizeArr, this.maxSize, (this.maxSize / 1024).toFixed(2)) || sizeArr.join('\n') + `\n${sizeArr.length}个文件已超出来最大可上传的文件大小\n限制大小为${(this.maxSize / 1024).toFixed(2)}M`)
            return false
          }
          this.isTailor(file)
        }
      })
    },
    isTailor (file) {
      if (this.option.autoCropWidth && this.option.autoCropHeight) {
        let srcArr = []
        // 转化为blob  多图片上传裁剪
        for (let i = 0; i < file.length; i++) {
          let reader = new FileReader()
          reader.readAsDataURL(file[i])
          reader.onload = (e) => {
            let src = ''
            if (typeof e.target.result === 'object') {
              src = window.URL.createObjectURL(new Blob([e.target.result]))
            } else {
              src = e.target.result
            }
            srcArr.push({
              src,
              name: file[i].name
            })
            if (srcArr.length == file.length) {
              this.tailorParams = {
                visible: true,
                srcArr
              }
            }
          }
        }
      } else {
        this.uploadModules(file)
      }
    },
    uploadModules (file) {
      // oss上传
      if (isObject(this.oss) && Object.keys(this.oss).length && this.fileFormat == 'blob') {
        let client = new OSS(this.oss)
        let promiseArr = []
        this.fullscreenLoading = true
        this.createLoadingInstance()
        for (let i = 0; i < file.length; i++) { /** 循环上传 */
          let imgStr = `${this.oss.catalogue ? '/' + this.oss.catalogue : ''}${new Date().getTime()}_${file[i].name}`
          let promise = client.multipartUpload(imgStr, file[i]).then((respond) => {
            this.haveUploadedFile.push({
              url: this.oss.url + respond.name,
              name: respond.name
            })
          })
          promiseArr.push(promise)
        }
        this.eventCallBack('uploadLoading', file, this.haveUploadedFile)
        Promise.all(promiseArr).then((result) => {
          this.fullscreenLoading = false
          this.clearLoadingInstance()
          this.eventCallBack('uploadSuccess', this.haveUploadedFile)
        }).catch(err => {
          this.fullscreenLoading = false
          this.clearLoadingInstance()
          this.eventCallBack('uploadError', this.haveUploadedFile)
        })
      } else if (this.action) { // 立即上传
        let requestParams = {
          ...this.defaultConfig,
          method: 'post',
          url: this.action,
          data: deepClone(this.data),
          headers: this.headers || {},
          withCredentials: this.withCredentials
        }
        if (!requestParams.headers['Content-Type']) {
          if (this.fileFormat == 'blob') {
            requestParams.headers['Content-Type'] = 'multipart/form-data'
          }
        }
        let promiseArr = []
        this.fullscreenLoading = true
        this.createLoadingInstance()
        for (let i = 0; i < file.length; i++) { /** 循环上传 */
          if (this.fileFormat == 'base64') {
            let reader = new FileReader()
            reader.readAsDataURL(file[i])
            // 请求需放在onload中，否则后台接受不到base64转化后的数据。
            reader.onload = (e) => {
              requestParams.onUploadProgress = (progressEvent) => {
                if (progressEvent.lengthComputable) {
                  let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0)
                  let data = this.uploadFilesList[i]
                  data.progress = parseInt(val)
                  data.src = e.target.result
                  this.$set(this.uploadFilesList, i, data)
                  // 主动触发检查loading状态
                  if ((progressEvent.loaded / progressEvent.total * 100).toFixed(0) >= 100) {
                    this.changeLoadingStatus()
                  }
                }
              }
              requestParams.data[this.fieldName] = e.target.result
              let promise = axios(requestParams).then(res => {
                if (this.isCode(res.data)) {
                  let url = this.prefixHttp ? this.prefixHttp + this.isValue(res.data) : this.isValue(res.data)
                  this.haveUploadedFile.push({
                    url,
                    name: file[i].name
                  })
                  this.uploadSuccess(i)
                } else {
                  // 上传失败
                  this.uploadErrer(i)
                  this.eventCallBack('uploadError', res, this.haveUploadedFile)
                }
              })
                .catch(err => {
                  // 上传失败
                  this.uploadErrer(i)
                  this.eventCallBack('uploadError', err, this.haveUploadedFile)
                })
              promiseArr.push(promise)
            }
          } else if (this.fileFormat == 'blob') {
            let FormData = new window.FormData()
            FormData.append(this.fieldName, file[i])
            for (let key in requestParams.data) {
              FormData.append(key, requestParams.data[key])
            }
            requestParams.data = FormData
            let reader = new FileReader()
            reader.readAsDataURL(file[i])
            // 请求需放在onload中，否则后台接受不到base64转化后的数据。
            reader.onload = (e) => {
              requestParams.onUploadProgress = (progressEvent) => {
                if (progressEvent.lengthComputable) {
                  let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0)
                  let data = this.uploadFilesList[i]
                  data.progress = parseInt(val)
                  data.src = e.target.result
                  this.$set(this.uploadFilesList, i, data)
                  // 主动触发检查loading状态
                  if ((progressEvent.loaded / progressEvent.total * 100).toFixed(0) >= 100) {
                    this.changeLoadingStatus()
                  }
                }
              }
              let promise = axios(requestParams).then(res => {
                if (this.isCode(res.data)) {
                  let url = this.prefixHttp ? this.prefixHttp + this.isValue(res.data) : this.isValue(res.data)
                  this.haveUploadedFile.push({
                    url,
                    name: file[i].name
                  })
                  this.uploadSuccess(i)
                } else {
                  // 上传失败
                  this.uploadErrer(i)
                  this.eventCallBack('uploadError', res, this.haveUploadedFile)
                }
              })
                .catch(err => {
                  // 上传失败
                  this.uploadErrer(i)
                  this.eventCallBack('uploadError', err, this.haveUploadedFile)
                })
              promiseArr.push(promise)
            }
          }
        }
        this.eventCallBack('uploadLoading', file, this.haveUploadedFile)
        Promise.all(promiseArr).then((result) => {
          this.fullscreenLoading = false
          this.clearLoadingInstance()
          this.eventCallBack('uploadSuccess', this.haveUploadedFile)
        }).catch(err => {
          this.fullscreenLoading = false
          this.clearLoadingInstance()
          this.eventCallBack('uploadError', err, this.haveUploadedFile)
        })
      } else { // 不上传，添加到上传列表返回
        this.eventCallBack('originalFileSuccess', file)
      }
    },
    tailorPreviewClose (status) {
      this.tailorParams = {
        visible: false,
        src: []
      }
      if (status != 'comfirm') {
        this.fullscreenLoading = false
        this.clearLoadingInstance()
      }
    },
    createLoadingInstance() {
        if (!this.loadingInstance) {
          this.loadingInstance = this.$loading()
        }
    },
    clearLoadingInstance() {
      if (!this.loadingInstance) return fasle
      this.loadingInstance.close()
      setTimeout(() => {
        this.loadingInstance = null
      }, 300)
    },
    uploadErrer (i) {
      // 上传失败
      let data = this.uploadFilesList[i]
      data.error = true
      this.$set(this.uploadFilesList, i, data)
    },
    uploadSuccess (i) {
      // 上传成功
      let data = this.uploadFilesList[i]
      data.success = true
      this.$set(this.uploadFilesList, i, data)
    },
    eventCallBack (key, data = [], list = []) {
      // 传入函数调用的方式
      this.$emit(key, data, list)
    },
    isValue (res) {
      let callBackStr = ''
      if (isObject(res)) {
        for (let key in res) {
          let status = this.responseFileName ? key == this.responseFileName && typeof res[key] === 'string' : (key == 'url' || key == 'data') && typeof res[key] === 'string'
          if (status) {
            callBackStr = res[key]
          } else if (isObject(res[key])) {
            callBackStr = this.isValue(res[key])
          }
        }
      } else if (typeof res === 'string') {
        callBackStr = res
      }
      return callBackStr
    },
    isCode (data) {
      let callBackStatus = false
      if (isObject(data)) {
        for (let key in data) {
          if (key == 'code') {
            if (this.responseCode.includes(data[key])) {
              callBackStatus = true
            } else {
              callBackStatus = false
            }
          } else if (isObject(data[key])) {
            callBackStatus = this.isCode(data[key])
          }
        }
      } else {
        callBackStatus = false
      }
      return callBackStatus
    },
    deleteIMG (index) {
      let item = this.haveUploadedFile[index]
      this.haveUploadedFile.splice(index, 1)
      this.eventCallBack('deleteFile', this.haveUploadedFile, item)
    },
    deleteUploadFilesList (index) {
      this.uploadFilesList.splice(index, 1)
    },
    transitionLiStyle () {
      let styleString = this.imgWidth && this.imgHeight && `width:${conversion(this.imgWidth)}; height:${conversion(this.imgHeight)};` || this.imgWidth && !this.imgHeight && `width:${conversion(this.imgWidth)}; height:${conversion(this.imgWidth)};` || !this.imgWidth && this.imgHeight && `width:${conversion(this.imgHeight)}; height:${conversion(this.imgHeight)};`
      return styleString
    },
    checkIsImage (list) {
      let newImageList = []
      list.forEach(item => {
        if (this.checkFileType(item.url || item) == 'icon-images') {
          newImageList.push(item.url || item)
        }
      })
      return newImageList
    },
    onView (url, listType = 'square', index) {
      if (!this.isView) return false
      let type = this.checkFileType(url)
      if (type == 'icon-pdf') {
        this.pdfURL = url
      } else if (['icon-video', 'icon-music'].includes(type)) {
        window.open(url)
      } else {
        if (listType == 'list' && type == 'icon-images') {
          let imgInstantiation = new Image()
          imgInstantiation.src = url
          setTimeout(() => {
            if (imgInstantiation.fileSize > 0 || (imgInstantiation.width > 0 && imgInstantiation.height > 0)) {
              this.$refs.imageViews.onViewer(index, url)
            } else {
              this.$message.error('图片读取失败！')
            }
          }, 300)
        } else if (type == 'icon-word' || type == 'icon-excel') {
          axios({
            method: 'get',
            responseType: type == 'icon-word' ? 'blob' : 'arraybuffer', // 设置响应文件格式 responseType: "arraybuffer"
            url
          })
            .then(({ data }) => {
              window.open(`https://view.officeapps.live.com/op/view.aspx?src=${url}`)
            })
            .catch(err => {
              this.$confirm('当前类型不支持预览，是否下载', '提示', {})
              .then( res => {
                window.open(url)
              })
            })
        } else {
            this.$confirm('当前类型不支持预览，是否下载', '提示', {})
            .then( res => {
              window.open(url)
            })
        }
      }
    },
    destroyedDrag (e) {
      e.stopPropagation()
      e.preventDefault()
    },
    eventDrop (e) {
      this.uploadFilesList = []
      e.stopPropagation()
      e.preventDefault() // 必填字段
      console.log(e.dataTransfer.files, 'e.dataTransfer.files')
      let arr = Array.prototype.slice.call(e.dataTransfer.files)
      arr.forEach(item => {
        this.uploadFilesList.push({
          name: item.name,
          type: item.type,
          error: false,
          progress: 0,
          src: ''
        })
      })
      this.isTailor(e.dataTransfer.files)
    },
    getUrlFileName,
    isObject,
    conversion,
    checkFileType,
    numerical
  },
  beforeDestroy () {
    if (this.drag) {
      var dropbox = document.getElementById('upload-drag')
      dropbox.removeEventListener('drop', this.eventDrop, false)
      dropbox.removeEventListener('dragleave', this.destroyedDrag)
      dropbox.removeEventListener('dragenter', this.destroyedDrag)
      dropbox.removeEventListener('dragover', this.destroyedDrag)
    }
  }
}
</script>

<style lang="less" scoped>
.lg-upload{
    width: 100%;
    height: auto;
    overflow: hidden;
    .lg-upload__slot{
        display: inline-block;
        width: auto;
    }
    .lg-upload__file{
        width: 100%;
        overflow: hidden;
        padding: 10px 5px;
        .lg-upload__file__list{
            list-style-type: none;
            padding: 0;
            margin: 0;
            li{
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                padding-right: 10px;
                color: #606266;
                display: flex;
                user-select: none;
                position: relative;
                .lg-upload__progress{
                  position: absolute;
                  bottom: -5px;
                  left: 0;
                  width: 0px;
                  border: 1px solid #409eff;
                }
                .lg-upload__progressNumber{
                  position: absolute;
                  bottom: -15px;
                  right: 7px;
                  color: #333;
                }
                .delete{
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-48%);
                    font-size: 16px;
                    height: 24px;
                    display: none;
                    color: #333;
                    cursor: pointer;
                }
                &:hover{
                    background: #f5f7fa;
                    color: #409eff;
                    .delete{
                        display: block;
                    }
                }
                .icon{
                    margin-right: 5px;
                }
                span{
                    max-width: calc(100% - 80px);
                    height: 24px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    cursor: pointer;
                }
                & ~ li{
                    margin-top: 3px;
                }
            }
            .underway{
              margin-bottom: 10px !important;
              color: #409eff;
              width: calc(100% - 60px);
              .lg-upload__progressNumber{
                right: -40px;
              }
              &:hover{
                  background: rgba(0, 0, 0, 0);
                  color: #409eff;
                  .delete{
                      display: none;
                      right: 0px;
                  }
              }
            }
            .error{
                color: #f56c6c;
                &:hover{
                    color: #f56c6c;
                    .delete{
                        display: block;
                    }
                }
                .lg-upload__progress{
                  border-color: #f56c6c;
                }
                .lg-upload__progressNumber{
                  color: #f56c6c;
                }
            }
        }
        .lg-upload__file__square{
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            li{
              width: 100px;
              height: 100px;
              margin-bottom: 15px;
              margin-right: 15px;
              position: relative;
              .notImage{
                  background: #dbdbdb;
                  border-radius: 5px;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction:column;
                  align-items: center;
                  justify-content: center;
                  i{
                      font-size: 40px;
                      color: #fff;
                  }
                  .flie-type-name{
                      margin-top: 7px;
                      color: #fff;
                      letter-spacing: 0.5px;
                  }
              }
              .square-Progress{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 2001;
              }
            }
            .square-underway{
              .delete{
                cursor: pointer;
                user-select: none;
                position: absolute;
                right: 0;
                top: 0;
                font-size: 22px;
                color: #53a8ff;
                z-index: 2002
              }
            }
        }
    }
    .lg-upload__drag{
      .lg-upload__drag--wrapper{
        border: 1px dashed #ccc;
        border-radius: 5px;
        width: 280px;
        height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        user-select: none;
        &:hover{
          border-color: rgba(64, 158, 255, 1);
        }
        i{
          color: #ccc;
          font-size: 44px;
          margin-bottom: 10px;
        }
        p{
          color: #aaa;
          font-size: 14px;
          margin: 0;
          padding: 0;
          span{
            color:rgba(64, 158, 255, .9);
          }
        }
      }
      .lg-upload__drag--forbid{
        &:hover{
          border-color: #ccc;
        }
        i{
          color: #ccc;
          font-size: 44px;
          margin-bottom: 10px;
        }
        p{
          span{
            color:#aaa;
          }
        }
      }
    }
}
.pointer{
    cursor: pointer;
}
</style>
